<!-- 其他设置 -->
<template>
    <div class="other">
        <div class="other-heared">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item> <i class="el-icon-setting"></i> 设置 </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="other-container">
            <div class="handle-box">
                <el-button type="danger" @click="SetBatchbtn"><i class="el-icon-delete-solid type"></i>批量删除</el-button>
                <el-input placeholder="用户名" class="handle-input mr10 userhandle type" v-model="search"></el-input>
                <el-button type="primary" icon="el-icon-search" class="type" @click="SetSearch">搜索</el-button>
                <el-button type="primary" id="adduser" @click="Setadd"><span class="add">+</span> 新增</el-button>
            </div>

            <!-- 其他设置列表 -->
            <div class="other-table">
                <el-table
                    :data="otherList"
                    border
                    class="table"
                    ref="multipleTable"
                    header-cell-class-name="table-header"
                    @selection-change="handleSelectionChange"
                >
                    <el-table-column type="selection" width="55" align="center"> </el-table-column>
                    <el-table-column prop="type" label="联系方式" align="center"></el-table-column>
                    <el-table-column prop="name" label="名称" align="center"></el-table-column>
                    <el-table-column prop="sort" label="排序" width="180" align="center"></el-table-column>
                    <el-table-column prop="contents" label="地址" width="180" align="center"></el-table-column>
                    <el-table-column label="状态" align="center" width="200">
                        <template slot-scope="scope">
                            <el-switch
                                v-model="scope.row.states"
                                active-value="1"
                                inactive-value="2"
                                active-text="显示中"
                                inactive-text="不显示"
                                @change="changeSwitch($event, scope.row, scope.$index)"
                            ></el-switch>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="400" align="center">
                        <template slot-scope="scope">
                            <el-button plain @click="Customerbtnchange(scope.row)" class="bd_item"
                                ><i class="el-icon-edit"></i>编辑</el-button
                            >
                            <el-button plain @click="Setdelbtn(scope.row)" class="del_item"><i class="el-icon-delete"></i>删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <!-- 其他设置分页-->
                <el-pagination
                    background
                    layout="total,prev, pager, next"
                    :total="count"
                    :page-size="10"
                    @current-change="handleCurrentChange"
                    :current-page.sync="page"
                    @size-change="handleSizeChange"
                >
                </el-pagination>
                <!-- 点击新增弹出框 -->
                <el-dialog title="编辑" :visible.sync="newVisiblechange" width="30%" :before-close="handleClose">
                    <el-form :model="SetForm" status-icon ref="newruleForm" label-width="100px" class="demo-firstruleForm">
                        <el-form-item label="负责人" prop="name">
                            <el-input type="text" v-model="SetForm.name" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="地址" prop="contents">
                            <el-input type="text" v-model="SetForm.contents" autocomplete="off" @input="changeadress($event)"></el-input>
                        </el-form-item>
                        <el-form-item label="设置模式" prop="type">
                            <el-select v-model="value" placeholder="请选择" filterable @change="changeValue">
                                <el-option v-for="(item, key) in SetDown" :key="item['key']" :label="item" :value="key"> </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="排序" prop="sort">
                            <el-input type="text" v-model="SetForm.sort" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="状态" prop="states">
                            <template>
                                <el-switch
                                    v-model="SetForm.states"
                                    active-value="1"
                                    inactive-value="2"
                                    active-text="显示"
                                    inactive-text="不显示"
                                    @change="changeSwitch2($event)"
                                ></el-switch>
                            </template>
                        </el-form-item>
                    </el-form>
                    <span slot="footer" class="dialog-footer">
                        <el-button @click="CancelSettings">取 消</el-button>
                        <el-button type="primary" @click="SetNewbtnAdd">确 定</el-button>
                    </span>
                </el-dialog>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            //其他设置列表
            otherList: [],
            page: 1,
            page_size: 10,
            flag: 0,
            type_id: '',
            //搜索框的v-model
            search: '',
            count: 0,
            batch_id: '',
            newVisiblechange: false,
            SetForm: {
                name: '',
                address: '',
                type: '',
                sort: '',
                states: ''
            },
            //下拉的value
            type: '',
            SetDown: [],
            value: '',
            keyword: this.search
        };
    },
    mounted() {},
    created() {
        this.getkey();
        this.otherSetUpList();
    },
    methods: {
        // 获取token
        getkey() {
            this.token = sessionStorage.getItem('token');
        },
        //其他设置列表
        otherSetUpList() {
            this.$axios
                .get('admin/setting_list', {
                    params: {
                        token: this.token,
                        page: 1,
                        page_size: 10,
                        keyword: this.search
                    }
                })
                .then((res) => {
                    this.count = res.data.data.count;
                    this.otherList = res.data.data.data;
                    // console.log(this.otherList)
                });
        },
        //设置搜索
        SetSearch() {
            this.keyword = this.search;
            this.otherSetUpList();
        },
        //switch开关
        changeSwitch(e, row, index) {
            // console.log(e,row,index)
            this.$axios
                .post('admin/setting_update', {
                    token: this.token,
                    id: row.id,
                    name: row.name,
                    contents: row.contents,
                    type: row.type,
                    sort: row.sort,
                    states: row.states
                })
                .then((res) => {});
        },
        //设置新增按钮
        Setadd() {
            this.SetForm.name = '';
            this.SetForm.contents = '';
            this.value = '';
            this.SetForm.sort = '';
            this.SetForm.states = 2;
            this.newVisiblechange = true;
            this.flag++;
            this.$axios
                .get('admin/setting_pull', {
                    params: {
                        token: this.token
                    }
                })
                .then((res) => {
                    this.SetDown = res.data.data.type;
                    // console.log(res.data.data.type)
                });
        },
        //下拉框改变值
        changeValue(val) {
            this.type = val;
            console.log(val);
        },
        //取消设置
        CancelSettings() {
            this.newVisiblechange = false;
        },
        //弹出框X
        handleClose() {
            this.newVisiblechange = false;
        },
        //设置新增确认按钮
        SetNewbtnAdd() {
            this.newVisiblechange = false;
            if (this.flag === 1) {
                this.$axios
                    .post('admin/setting_add', {
                        token: this.token,
                        name: this.SetForm.name,
                        contents: this.SetForm.contents,
                        type: this.type,
                        sort: this.SetForm.sort,
                        states: this.SetForm.states
                    })
                    .then((res) => {
                        if (res.status === 200) {
                            this.$message.success('添加完成');
                            this.otherSetUpList();
                            (this.SetForm.name = ''), (this.SetForm.contents = ''), (this.value = '');
                            this.SetForm.sort = '';
                            this.SetForm.states = 2;
                        }
                    });
                this.flag = 0;
                console.log(this.flag);
            }
            this.$axios
                .post('admin/setting_update', {
                    token: this.token,
                    id: this.type_id,
                    name: this.SetForm.name,
                    contents: this.SetForm.contents,
                    type: this.value,
                    sort: this.SetForm.sort,
                    states: this.SetForm.states
                })
                .then((res) => {
                    this.$message.success('修改完成');
                    this.otherSetUpList();
                    // console.log('像咖啡');
                });
        },
        //删除
        Setdelbtn(row) {
            console.log(row);
            this.$confirm('确定删除吗', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then((action) => {
                    if (action === 'confirm') {
                        this.$axios
                            .get('admin/setting_delete', {
                                params: {
                                    token: this.token,
                                    id: row.id
                                }
                            })
                            .then((res) => {
                                if (res.status == 200) {
                                    this.$message({
                                        type: 'success',
                                        message: '删除成功!'
                                    });
                                }
                                this.otherSetUpList();
                            });
                    }
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
        },
        //全选删除
        SetBatchbtn() {
            this.$confirm('确定删除吗', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then((action) => {
                    if (action === 'confirm') {
                        this.$axios
                            .get('admin/setting_delete', {
                                params: {
                                    token: this.token,
                                    id: this.batch_id
                                }
                            })
                            .then((res) => {
                                if (res.status == 200) {
                                    this.$message({
                                        type: 'success',
                                        message: '删除成功!'
                                    });
                                }
                                this.otherSetUpList();
                            });
                    }
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
        },
        //全选
        handleSelectionChange(val) {
            // console.log(val)
            this.batch_id = val
                .map(function (obj, index) {
                    return obj.id;
                })
                .join(',');
        },
        handleCurrentChange() {},
        handleSizeChange() {},
        //编辑
        Customerbtnchange(row) {
            this.newVisiblechange = true;
            // console.log(row);
            this.SetForm.name = row.name;
            this.SetForm.contents = row.contents;
            this.SetForm.sort = row.sort;
            this.SetForm.states = row.states;
            this.value = row.type;
            this.type_id = row.id;
        },
        changeadress(val) {
            this.$forceUpdate();
            //   console.log(val)
        },

        changeSwitch2() {}
    }
};
</script>
<style scoped>
.handle-box {
    margin-top: 5px;
    padding-top: 20px;
    margin-bottom: 20px;
    margin-left: 30px;
    /* background-color: rgba(255,255,255); */
}
.other-table {
    margin-left: 30px;
}
.other-container {
    background-color: white;
}
.type {
    margin-left: 10px;
}
.handle-input {
    width: 300px;
    display: inline-block;
}
.bd_item {
    /* background-color: white; */
    border: 0px;
    color: rgb(64, 158, 255);
}
.del_item {
    border: 0px;
    color: red;
}
</style>